import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Card } from 'antd'
import * as service from '../../../../api/cyyindex'
import './person.scss'
interface Props { }
function StaffPerson(props: Props) {
    var myChart1: any = null;
    var myChart2: any = null;
    var myChart3: any = null;
    const [list, setList] = useState([])
   
    const [data,setData]=useState([])
    const [data1, setData1] = useState([])
    
    var fa = async () => {
     var res=await   service.census()
        console.log(res)
            var arr = res.data.data.map((item: any) => {
              
                return item.sector
           })
           var arr1= res.data.data.map((item:any) => {
                return item.number
           })
            var res1=await service.type_list()
        var arr2 = res1.data.data.map((item: any) => {
                return {value:item.number,name:item.employee}
            })
           var res2=await service.major_list()
           var arr3 = res2.data.data.map((item: any) => {
            return {value:item.number,name:item.education}
        })
           
            draw(arr,arr1,arr2,arr3)
    }

    useEffect(() => {
fa()
        myChart1 = echarts.init(document.getElementById('hh1') || document.body)
        myChart2 = echarts.init(document.getElementById('hh2') || document.body)
        myChart3 = echarts.init(document.getElementById('hh3') || document.body)
      
    }, [])
    var draw: any = (x: any, y: any,a:any,b:any) => {
        console.log(x,y);
        
        myChart1.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: x,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '40%',
                    data: y
                }
            ]
        }
        ),
            myChart2.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: 
                            a
                            
                       
                    }
                ]
            } ),
        myChart3.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['大专', '本科', '硕士', '博士', '博士以上'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: b
                }
            ]
        }

        )
    }
    // useEffect(() => {
    //     service.Employee1_list().then(res => {
    //         setList(res.data)
    //     })
    //     myChart1 = echarts.init(document.getElementById('hh1') || document.body)
    //     myChart2 = echarts.init(document.getElementById('hh2') || document.body)
    //     myChart3 = echarts.init(document.getElementById('hh3') || document.body)

    //     draw()
    // }, [])

    return (
        <div className='staff-person'>
            <p className='title'>员工概况</p>
        <div className='box'>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
        {
          list.map((item: any, index: any) => {
            return (
              <Card style={{ width: 300, textAlign: 'center',fontSize:18 }} key={index} >
                <p>{ item.name}</p>
                <p>{ item.shu}</p>
    
            </Card>
            )
          })
        }
       
      </div>
            <div id='hh1' style={{ width: 1600, height: 600 ,marginTop:20}}></div>
            <div style={{display:'flex',marginTop:20}}>
            <div id='hh2' style={{ width: 600, height: 400 }}></div>
            <div id='hh3' style={{ width: 600, height: 400 }}></div>
            </div>
            
            </div>
        </div>
    );
}

export default StaffPerson;